<template>
    <!--  <el-button type="primary" @click="text">测试</el-button> -->
    <div id="login">
        <div id="login-box">
            <h2>商品管理系统</h2>
            <el-form ref="formRef" :rules="rules" :model="form" label-width="120px">
                <el-form-item label="用户名" prop="account">
                    <el-input v-model="form.account" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" />
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="doSubmit(formRef)">提交</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import User, { IUser } from '@/models/User'
import { FormInstance } from 'element-plus';
import {doLogin} from '@/api/user';
import {useUser} from '@/store/user';
// import router from '@/router'
import { useRoute, useRouter } from 'vue-router';
const store=useUser()
const route = useRoute();
const router = useRouter();
let u:IUser=new User()
const formRef = ref();
const rules = { // 不用响应式, 因为其不会改
    account: [{ required: true, message: '必须填写用户名' }],
    password: [{ required: true, message: '必须填写用户名' }]
}
const form:IUser = reactive(new User());
// 验证
const doSubmit = (form1: FormInstance) => {
    // formRef.value.validate
    form1.validate(async(valid:boolean)=> {
        if (valid) {
            // console.log('验证成功')
            const res =  await doLogin(form)
            // console.log("loginData",res.data);
            // Pinia 变更用户登录状态
            // res.data.data.token
            store.login();
            // 未来补充一个跳转原来的url
            // router.push('/')
            const redirect = route.query.redirect as string;
            router.push(redirect || '/')
        } else console.log('验证失败');
    })
}
// 🍍
// import {useUser} from "@/store/user"
// const store=useUser()
// const text=function(){
//     store.login()
//     store.setUserInfo({
//         username:"store",
//         age:36,
//     })
//     console.log(store.menus,store.isLogin);
// }
</script>

<style scoped lang="scss">
#login {
    width: 100%;
    height: 100%;
    background: url('../assets/img/bg.jpg');
    background-size: cover;
    position: relative;
}

#login-box {
    h2 {
        text-align: center;
    }
}

#login-box {
    width: 650px;
    height: 220px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid grey;
    border-radius: 4px;
    background: #fff;
}
</style>